<template>
  <section class="hero-section">
    <div class="text-content">
      <p class="welcome-text">欢迎来到江西师范大学软件学院党建平台</p>
      <h1>红心向党</h1>
      <p class="subtitle">强国有我</p>
      <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</p>
      <button @click="goToContent">了解更多</button>
    </div>
  </section>
</template>

<script>
export default {
  name: 'HeroSection',
  methods: {
    goToContent() {
      // 直接跳转到 /index 页面，确保路由已经正确配置
      this.$router.push('/index');
    },
  },
};
</script>

<style scoped>
/* 组件的样式 */
.hero-section {
  height: 100vh; /* 占满整个屏幕高度 */
  background-color: #C53030;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 5rem;
  box-sizing: border-box;
}

.text-content {
  max-width: 500px;
  color: white;
}

.welcome-text {
  font-size: 1rem;
  color: #ffffff;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3rem;
  color: white;
  margin-bottom: 0.5rem;
}

.subtitle {
  font-size: 1.75rem;
  color: white;
  margin-bottom: 1rem;
}

.description {
  color: white;
  margin-bottom: 1.5rem;
}

button {
  padding: 10px 20px;
  background-color: #FFB347;
  color: #B22222;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}
</style>
